<template>
  <div id="LabTMLBDict">
    <Breadcrumb content="视图审核" />
    <div class="bodyContent">
      <!-- vxe-toolbar -->
      <Splitpanes class="area">
        <Pane size="60">
          <vxe-toolbar perfect>
            <template #buttons>
              <!--              <el-select
                  v-model="form.orgId"
                  placeholder="请选择"
                  ref="selectOrgRef"
                  filterable
                  clearable
                  style="width: 200px; margin-right: 10px"
              >
                <el-option
                    hidden
                    :value="form.orgId ? form.orgId : ''"
                    :label="form.orgName"
                ></el-option>
                <el-tree
                    filterable
                    :data="orgList"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :default-expand-all="true"
                    @node-click="handleOrgNodeClick"
                    highlight-current
                    ref="orgTreeRef"
                    node-key="id"
                    class="tools-tree"
                ></el-tree>
              </el-select>-->
              <vxe-input type="search" v-model="form.keyvalue" clearable class="vxeInputSearch" @search-click="findList" @clear="findList" @keyup.enter="findList" placeholder="关键字查询"></vxe-input>
              <vxe-button type="text" class="button-blue" @click="findList" icon="vxe-icon-refresh" :loading="loading">刷新</vxe-button>
              <vxe-button type="text" class="button-red" @click="showAuditSql" icon="vxe-icon-audit">审核</vxe-button>
            </template>
          </vxe-toolbar>
          <div class="tableBox">
            <vxe-table ref="tableRef" border="inner" align="left" class="mytable-scrollbar" :loading="loading" height="auto" :cell-style="calcCellBgColor" :data="tableData" :row-config="{ isCurrent: true }" :column-config="{ resizable: true }" show-overflow keep-source :scroll-y="{ enabled: true }" @current-change="tableCellClick" @menu-click="contextMenuClickEvent">
              <vxe-column type="checkbox" width="26"></vxe-column>
              <vxe-column type="seq" title="#" width="30"></vxe-column>
              <vxe-column field="name" title="名称" width="120"> </vxe-column>
              <vxe-column field="title" title="标题" width="120"> </vxe-column>
              <vxe-column field="viewType" title="类型" width="60">
                <template #default="{ row }">
                  {{ getmessTypeName(row) }}
                </template> </vxe-column>
              <vxe-column field="costTime" title="耗时" width="60"> </vxe-column>
              <vxe-column field="applyName" title="申请人" width="100"> </vxe-column>
              <vxe-column field="applyTime" title="申请时间" width="120"> </vxe-column>
              <vxe-column field="content" title="内容" width="220"> </vxe-column>
              <vxe-column field="remark" title="功能描述" width="150"> </vxe-column>
              <vxe-column field="remark" title="状态" width="80">
                <template #default="{ row }">
                  <span v-if="row.status==1" style="color:blue;">已审核</span>
                  <span v-else style="color:red;">未审核</span>
                </template>
              </vxe-column>
            </vxe-table>
          </div>
        </Pane>
      </Splitpanes>

      <vxe-modal v-model="auditDialog" width="30vw" height="10vw" show-footer destroy-on-close :mask="false">
        <template #title>
          <span>输入授权码</span>
        </template>
        <template #default>
          <el-input v-model="sqm" placeholder="请输入授权码" clearable type="textarea" :autosize="{ minRows: 4, maxRows: 10 }"></el-input>
        </template>
        <template #footer>
          <div class="flex justify-end">
            <vxe-button content="关闭" @click="auditDialog = false"></vxe-button>
            <vxe-button status="primary" content="确定" @click="auditSql"></vxe-button>
          </div>
        </template>
      </vxe-modal>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue'; //面包屑
import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import { VXETable } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import type { VxeTableInstance, VxeTablePropTypes, VxeTableEvents } from 'vxe-table';
import XEClipboard from 'xe-clipboard';
import { AppStore } from '@/stores/store';

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();
let store = AppStore();

// 左侧表格:
const loading = ref(false); //刷新+表格加载
const form = reactive({
  keyvalue: '',
  orgId: store.userInfo.orgId,
  orgName: store.userInfo.orgName
}); //根据关键字查询
const tableRef = ref<VxeTableInstance<RowVO>>(); //表格ref标记
const tableData = reactive([]); //表格数据
const viewsTypeList = reactive([]); //表格数据
const auditDialog = ref(false);
const sqm = ref('');

// 方法定义区 =============
onMounted(() => {
  findList(); //获取样本类型表格数据
  getDictDetailList();
});

function getDictDetailList() {
  viewsTypeList.length = 0;
  const url = '/api/sys/basDictDetail/findDictDetailList';
  proxy.$http
    .get(url, { params: { code: 'viewTypes' } })
    .then((res: any) => {
      viewsTypeList.push(...res.data);
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}

function getmessTypeName(row) {
  // proxy.$nextTick(() => {
  if (viewsTypeList.length > 0) {
    const group = viewsTypeList.find((item) => item.code == row.viewType);
    return group ? group.name : '';
  }
}

function calcCellBgColor({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) {
  if (row.costTime.replace('ms', '') > 3000) {
    return { background: '#FF9900', color: '#fff' };
  }
}


// 获取 样本类型表格数据
const findList = () => {
  loading.value = true;
  tableData.length = 0; //放入数据前清空数据
  const url = '/view/apply/getViewApplyList';
  proxy.$http
    //注意此处的数据条数
    .get(url, { params: { keyword: form.keyvalue, orgId: form.orgId, viewSource: 2 } })
    .then(async (res: any) => {
      tableData.push(...res.data);
      loading.value = false;
    })
    .catch((err: any) => {
      loading.value = false;
      VxeMessage('获取视图列表数据异常', VxeNotifyType.error);
    });
};
async function showAuditSql() {
  const sltView = (proxy.$refs.tableRef as any).getCheckboxRecords();
  if (!(sltView.length > 0)) {
    VxeMessage('请勾选要审核的数据', VxeNotifyType.info);
  } else {
    auditDialog.value = true;
  }
}

async function auditSql() {
  const sltView = (proxy.$refs.tableRef as any).getCheckboxRecords();
  const data = { ids: sltView.map((p) => p.id).join(','), sqm: sqm.value };
  const url = '/view/apply/auditViews';
  proxy.$http
    .post(url, data)
    .then((res: any) => {
      if (res.status.code === 1) {
        findList(); // 获取检验仪器表格数据
        auditDialog.value = false;
        VxeMessage('审核成功', VxeNotifyType.success);
      } else {
        auditDialog.value = false;
        VxeMessage(res.status.msg, VxeNotifyType.error);
      }
    })
    .catch((err: any) => {
      auditDialog.value = false;
      VxeMessage(err, VxeNotifyType.error);
    });
}
</script>
<style lang="scss" scoped>
#LabTMLBDict {
  width: 100%;
  height: 100%;
  .bodyContent {
    // 面包屑40px  上下间距10px
    height: calc(100% - 60px);
    .splitpanes {
      background-color: $base-white;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
      .tableBox {
        height: calc(100% - 40px);
      }
    }
  }
}
</style>
